Online Coloring Book Webpage
A Final Project for a Web Development Boot Camp
Introduction
For the final project of my web development boot camp, I created an interactive online coloring book using Django (Python) for the backend and JavaScript for the frontend. The project allows users to select different images, choose colors, and fill in sections with a click.
Tech Stack Used
- Backend: Django (Python)
- Frontend: HTML, CSS, JavaScript
- Database: SQLite
Features of the Web Application
1. User Authentication & Profiles
- Users can sign up, log in, and save their coloring progress.
- Guest users can still color but cannot save their work.
2. Image Selection
- A gallery of black-and-white line art images is available.
- Users can upload their own images (optional feature).
3. Interactive Coloring System
- Clicking on different sections fills them with the selected color.
- Uses JavaScript event listeners.
- A color picker tool allows users to choose any color they want.
4. Saving & Loading Artwork
- Users can save their colored images to the database.
- On login, users can reload previous artwork and continue coloring.
Technical Implementation
Backend (Django)
- Used Django to handle user authentication, image storage, and database interactions.
- Django views and templates were used to serve HTML content.
- Django REST Framework (DRF) was implemented to allow API interactions for saving and retrieving user artwork.
Frontend JavaScript
- JavaScript functions detected clicks on image regions and filled them with selected colors.
- CSS and animations enhanced the user experience.
Database Design
- User Table: Stores user details.
- Artwork Table: Saves colored images with user associations.
Challenges & Solutions
- Challenge: Detecting individual sections in an image for coloring.
- Solution: Used pixel detection and flood fill techniques in JavaScript.
- Challenge: Ensuring the app works smoothly across different devices.
- Solution: Used responsive CSS and optimized JavaScript performance.
Testing saving images:
